import React from "react";
import {Col, Media, Row} from "reactstrap";

class ContactItem extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            name: props.data.name,
            phone: props.data.phone
        }
    }

    handleInputName = e => {
        this.setState({
            name: e.target.value
        });
        this.props.setEventEditData(this.props.constant[0], e.target.value);
    };
    handleInputPhone = e => {
        this.setState({
            phone: e.target.value
        });
        this.props.setEventEditData(this.props.constant[1], e.target.value);
    };

    render() {

        const from = this.props.from;
        const editStatus = this.props.editStatus;
        const name = this.props.data.name;
        const phone = this.props.data.phone;
        const classItem = this.props.class;

        return (
            <Media>
                <Media body className="overflow-hidden">
                    <Row>
                        <Col md={3} className="align-self-center">
                            <span className="event-content-list-name">{from}</span>
                        </Col>
                        <Col md={9}>
                            <div className="event-content-grid-block event-content-grid-contact">
                                {!editStatus ? (
                                    <>
                                        <div className="event-content-list-item">
                                            {name}
                                        </div>
                                        <div className="event-content-list-item">
                                            {phone}
                                        </div>
                                    </>
                                ) : (
                                    <>
                                        <this.props.typeInput
                                            onChange={this.handleInputName}
                                            value={this.state.name}
                                            className={`event-content-list-item event-input-edit ${classItem}`}
                                        />
                                        <this.props.typeInput
                                            onChange={this.handleInputPhone}
                                            value={this.state.phone}
                                            className={`event-content-list-item event-input-edit ${classItem}`}
                                        />
                                    </>
                                )}
                            </div>
                        </Col>
                    </Row>
                </Media>
            </Media>
        )
    }
}

export default ContactItem;
